<template>
	<view class="login">
		<image class="login-img" src="" mode=""></image>
		<input class="login-name" type="text" v-model="username" placeholder="用户名/电话" />
		<view class="login-pwd">
			<input class="login-pwd-pwd" :type="changePassword" v-model="password"  placeholder="密码"/>
			<i @tap="eye('text')" v-if="changePassword=='password'" class="iconfont icon-bukejian login-pwd-img"></i>
				<i v-else  @tap="eye('password')"  class="iconfont icon-yanjing login-pwd-img"></i>
		</view>
		<view @tap="doLogin" class="login-btn">登录</view>
		<view class="login-operate">
			<view @tap="goToForgetSercret" class="login-operate-find">找回密码</view>
			<view class="login-operate-seperate">|</view>
			<view @tap="goToRegister" class="login-register">注册账号</view>
		</view>
	</view>
</template>

<script>
	import  {doLogin as doLoginApi} from '@/api/user/index.js'
	import {showTip} from '../../../utils/index.js'
	export default {
		data() {
			return {
				password:'',
				username:'',
				changePassword:'password'
			}
		},
		methods: {
			eye(value){
				this.changePassword=value;
			},
			//跳转到忘记密码页面
			goToForgetSercret(){
				uni.navigateTo({
					url:'../forgetSercret/forgetSercret'
				})
			},
			//跳转到注册页面
			goToRegister(){
				uni.navigateTo({
					url:'../register/register'
				})
			},
			//登录
			doLogin(){
				doLoginApi({
					password: this.password,
					username: this.username
				}).then(res=>{
					console.log('登录',res);
					if(res.code!=20001){
						var token=res.data.token;
						uni.setStorageSync('token',token);
						console.log('token',token);
						uni.showToast({
							title:'登录成功,1s中跳转到个人中心!'
						})
						setTimeout(()=>{
							uni.switchTab({
								url:'../user'
							})
						},1000)
					}else{
						showTip('登录失败','error')
					}
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// ::v-deep input::-ms-clear{
	// 	display: none;
	// }
	// ::v-deep input::-ms-reveal{
	// 	display: block;
	// }
.login{
	overflow: hidden;
	width: 100%;
	height: 100vh;
	background-color: #f1ece7;
	padding:0 100rpx;
	box-sizing	: border-box;
	&-img{
		display: block;
		margin:80px auto 100rpx;
		width: 180rpx;
		height: 180rpx;
		background-color: #fff;
		border-radius: 50%;
	}

	&-name,&-pwd-pwd{
		height: 100rpx;
		background-color:#f1ece7;
		text-indent: 60rpx;
		margin-bottom: 30rpx;
		border-radius: 50rpx;
		width: 100%;
		outline: none;
		border:1rpx solid rgba(255,255,255,.6);
	}
	&-pwd{
		position: relative;
		&-img{
			position: absolute;
			right: 2rpx;
			top: 50%;
			font-size: 40rpx;
			transform: translateY(-80%);
			z-index: 100;
			background-color: #f1ece7;
		}
	}
	&-btn{
		width: 600rpx;
		height: 100rpx;
		background-color: #354e44;
		margin: 0 auto;
		color:#fff;
		text-align: center;
		line-height: 100rpx;
		border-radius: 50rpx;
		margin :80rpx auto 60rpx ;
		letter-spacing: 10rpx;
	}
	&-operate{
		display: flex;
		justify-content: center;
		align-items: center;
		color:#e3e3e3e;
		&-seperate{
			margin:0 15rpx
		}
	}
	
}
</style>
